
<style>
    .red{color: red}
</style>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="admin-menus-app">

    <div class="row">
        <div class="col-md-6">
            <a class="btn btn-default" @click="getMenu">刷新</a>
        </div>
    </div>

    <div class="row" v-show="show.tree">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>排序</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,i) in tree">
                    <td>{{item.id}}</td>
                    <td><input v-model="item.title"></td>
                    <td><input v-model="item.rank"></td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="save(item)">保存</a>
                        <a v-if="item.id > 0" class="btn btn-info btn-xs" @click="openChild(item,i)">子菜单</a>
                        <a class="btn btn-danger btn-xs" @click="del(item)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <a class="btn btn-primary" @click="add()">添加</a>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="show.child">
        <div class="col-md-12" v-if="tree[parentIndex]">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>链接</th>
                    <th>配置主题</th>
                    <th>排序</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in tree[parentIndex].children">
                    <td>{{item.id}}</td>
                    <td><input v-model="item.title"></td>
                    <td><input v-model="item.link"></td>
                    <td><input v-model="item.theme"></td>
                    <td><input v-model="item.rank"></td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="save(item)">保存</a>
                        <a class="btn btn-info btn-xs" @click="grantEdit(item)" v-if="item.id > 0">权限</a>
                        <a class="btn btn-danger btn-xs" @click="del(item)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <a class="btn btn-primary" @click="addChild()">添加</a>
                        <a class="btn btn-warning" @click="showItem('tree')">关闭</a>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="show.grant">
        <div class="col-md-6 col-md-offset-2">
            <h3>【{{grant_edit.menu_title}}】 - 权限组：<small><a class="btn btn-info btn-xs" @click="getPermits">刷新</a></small></h3>
            <div class="form" role="form">
                <div class="form-group">
                    <label>筛选：</label>
                    <input class="form-control" v-model="keyword">
                </div>
                <div class="form-group">
                    <table class="table table-responsive table-striped table-bordered">
                        <tbody>
                        <tr v-for="(p,i) in permits" v-show="p.display">
                            <td>
                                <label>
                                    <input type="checkbox" :value="p.id" v-model="grant_edit.permits">
                                    <span v-html="filterView(p.uri)"></span>
                                </label>
                            </td>
                            <td>{{p.title}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="grantSave">保存</a>
                    <a class="btn btn-warning" @click="showItem('child')">关闭</a>
                </div>
            </div>
        </div>
    </div>


</section>
<!-- /.content -->

<script>
    function Menu(item) {
        var fields = ['id','title','link','theme','parent_id','rank'];
        fields.forEach(function (f) {
            if (item[f]) this[f] = item[f];
        }.bind(this))
    }

    var admin_menus_app = new Vue({
        el: '#admin-menus-app',
        data: {
            tree: [],
            permits: [],
            parentIndex: [],
            grant_edit: {menu_id: 0, menu_title: '', permits: []},
            show: {
                tree: true,
                child: false,
                grant: false
            },
            keyword: ''
        },
        created: function () {
            this.getMenu();
            this.getPermits();
        },
        methods: {
            getMenu: function () {
                ajax({
                    uri: '/admins/menu_tree',
                    success: function (resp) {
                        this.tree = resp.data;
                    }.bind(this)
                });
            },
            getPermits: function () {
                ajax({
                    uri: '/admins/permits_all',
                    success: function (resp) {
                        this.permits = resp.data;
                        this.filter();
                    }.bind(this)
                })
            },
            openChild: function (item, i) {
                this.parentIndex = i;
                this.showItem('child');
            },
            add: function () {
                this.tree.push({})
            },
            addChild: function () {
                const p = this.tree[this.parentIndex];
                p.children.push({
                    parent_id: p.id
                });
            },
            save: function (item) {
                if (!item.title) {
                    alert('标题不能空！');
                    return;
                }

                var menu = new Menu(item);
                ajax({
                    uri: '/admins/menu_save',
                    data: menu,
                    success: function(resp){
//                        this.showItem('tree');
                        this.getMenu();
                    }.bind(this)
                });
            },
            del: function (item) {
                if (confirm('确定要、真的要以及肯定要删除吗？') === false) return;
                ajax({
                    uri: '/admins/menu_del',
                    data: {id: item.id},
                    success: function (resp) {
                        this.getMenu();
                    }.bind(this)
                });
            },
            grantEdit: function (item) {
                this.grant_edit.menu_id = item.id;
                this.grant_edit.menu_title = item.title;
                ajax({
                    uri: '/admins/permits_menu',
                    data: {menu_id: item.id},
                    success: function (resp) {
                        this.grant_edit.permits = resp.data;
                        this.showItem('grant');
                    }.bind(this)
                })
            },
            grantSave: function () {
                ajax({
                    uri: '/admins/permits_menu_save',
                    data: this.grant_edit,
                    success: function (resp) {
                        this.showItem('child');
                    }.bind(this)
                })
            },
            showItem: function (item) {
                for (var p in this.show) {
                    this.show[p] = (p == item);
                }
            },
            turnPage: function (offset) {
                this.page.offset = offset;
            },
            filter: function () {
                var kw = this.keyword;
                this.permits.forEach(function (p, i) {
                    if (!kw) {
                        p.display = true;
                        return;
                    }
                    p.display = p.uri.indexOf(kw) > -1;
                })
            },
            filterView: function (uri) {
                var kw = this.keyword;
                if (kw) return uri.replace(new RegExp(kw),'<i class="red">'+kw+'</i>')
                else return uri;
            }
        },
        watch: {
            'keyword': function (nv, ov) {
                this.filter();
            }
        }
    });
</script>